<template>
  <div class="webPage">
    <!-- 前端分页 -->
    <div class="pagination" :class="{ isBorderTop: !isBorderTop }">
      <div class="left">
        <span>共{{ total }}条</span>
        <span class="ml-10">一页{{ info["pageSize"] }}条</span>
      </div>
      <Page
        :total="total"
        :current="info.currentPage"
        show-sizer
        :page-size="info.pageSize"
        :page-size-opts="[3, 6, 9]"
        @on-change="changePage"
        @on-page-size-change="changePageSize"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: "webPage",
  props: {
    // 截取的数据(用来显示的)
    value: {
      type: Array,
      default: () => [],
    },
    // 需要从中查询的数据
    operationLogVoList: {
      type: Array,
      default: () => [],
    },
    // 是否需要上边框
    isBorderTop: {
      type: Boolean,
      default: () => true,
    },
  },
  data() {
    return {
      total: 0,
      info: {
        pageSize: 3,
        currentPage: 1,
      },
    };
  },

  // mounted() {
  //   // 总条数
  //   this.$nextTick(() => {
  //     console.log(this.operationLogVoList);
  //     this.total = Number(this?.operationLogVoList?.length);
  //     // 设置要显示的数据
  //     this.setData();
  //   });
  // },
  watch: {
    operationLogVoList: {
      handler(nval) {
        if (nval) {
          this.total = Number(this?.operationLogVoList?.length);
          this.setData();
        } else {
          this.total = "";
          this.setData();
        }
      },
      immediate: true,
    },
  },
  methods: {
    // 分页
    changePage(val) {
      this.info.currentPage = val;
      // 切换数据
      this.setData();
    },
    // 切换每页条数
    changePageSize(val) {
      this.info.pageSize = val;
      this.info.currentPage = 1;
      // 切换数据
      this.setData();
    },
    // 切换数据
    setData() {
      var afterIndex = this.info.currentPage * this.info.pageSize;
      var beforeIndex = afterIndex - this.info.pageSize;

      this.$emit(
        "input",
        this.operationLogVoList.slice(beforeIndex, afterIndex)
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.webPage ::v-deep {
}
</style>
